<template>
  <div class="sgh-login">
    <form action="" @submit="submit" name="loginForm">
      <h1>Login</h1>
      <section class="form-item">
        <Input type="text" name="uname" labelVal="账号" />
      </section>
      <section class="form-item">
        <Input type="password" name="pwd" labelVal="密码" />
      </section>
      <section class="form-item">
        <Input type="submit" defaultValue="登录" name="loginBtn" />
      </section>
    </form>
  </div>
</template>

<script>
import Input from "@/components/Input";
import { login } from '@/service/login'
export default {
  name: "Login",
  components: {
    Input,
  },
  data() {
    return {};
  },
  methods: {
    submit(event) {
      event.preventDefault();
      let params = {
        uname: loginForm.uname.value,
        pwd: loginForm.pwd.value,
      };
      login.bind(this)(params);
    },
  },
};
</script>

<style lang="scss">
$font-color: #999;
$theme-green-color: #48aa4e;
$part-bg-color: #2d3838;
$border-gray-color: #474747;
.sgh-login {
  position: relative;
  height: 100%;
  form {
    color: $font-color;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -70%);
    box-shadow: 0 0 4px 0 $theme-green-color;
    border-radius: 5px;
    padding: 10px 60px 20px 40px;
    .form-item {
      margin: 5px 0;
    }
    h1 {
      margin-left: 28px;
    }
    #loginBtn {
      margin-left: 70px;
      width: 212px;
      background-color: $theme-green-color;
      color: #fff;
      cursor: pointer;
    }
  }
}
</style>